import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import { List } from 'antd';
import UpdatePasswordModal from './UpdatePasswordModal';
// import { getTimeDistance } from '@/utils/utils';

// const passwordStrength = {
//   strong: (
//     <font className="strong">
//       <FormattedMessage id="app.settings.security.strong" defaultMessage="Strong" />
//     </font>
//   ),
//   medium: (
//     <font className="medium">
//       <FormattedMessage id="app.settings.security.medium" defaultMessage="Medium" />
//     </font>
//   ),
//   weak: (
//     <font className="weak">
//       <FormattedMessage id="app.settings.security.weak" defaultMessage="Weak" />
//       Weak
//     </font>
//   ),
// };
@connect(({ user }) => ({
  currentUser: user.currentUser,
}))
class SecurityView extends Component {
  createHandler = values => {
    const { dispatch } = this.props;
    // console.log(values);
    dispatch({
      type: 'user/updatePwd',
      payload: values,
    });
  };

  getData = () => [
    {
      title: formatMessage({ id: 'app.settings.security.password' }, {}),
      // description: (
      //   <Fragment>
      //     {formatMessage({ id: 'app.settings.security.password-description' })}：
      //     {passwordStrength.strong}
      //   </Fragment>
      // ),
      actions: [
        <UpdatePasswordModal onOk={this.createHandler}>
          <a>
            <FormattedMessage id="app.settings.security.modify" defaultMessage="Modify" />
          </a>
        </UpdatePasswordModal>,
      ],
    },
    // {
    //   title: formatMessage({ id: 'app.settings.security.phone' }, {}),
    //   description: `${formatMessage(
    //     { id: 'app.settings.security.phone-description' },
    //     {}
    //   )}：138****8293`,
    //   actions: [
    //     <a>
    //       <FormattedMessage id="app.settings.security.modify" defaultMessage="Modify" />
    //     </a>,
    //   ],
    // },
    // {
    //   title: formatMessage({ id: 'app.settings.security.question' }, {}),
    //   description: formatMessage({ id: 'app.settings.security.question-description' }, {}),
    //   actions: [
    //     <a>
    //       <FormattedMessage id="app.settings.security.set" defaultMessage="Set" />
    //     </a>,
    //   ],
    // },
    // {
    //   title: formatMessage({ id: 'app.settings.security.email' }, {}),
    //   description: `${formatMessage(
    //     { id: 'app.settings.security.email-description' },
    //     {}
    //   )}：ant***sign.com`,
    //   actions: [
    //     <a>
    //       <FormattedMessage id="app.settings.security.modify" defaultMessage="Modify" />
    //     </a>,
    //   ],
    // },
    // {
    //   title: formatMessage({ id: 'app.settings.security.mfa' }, {}),
    //   description: formatMessage({ id: 'app.settings.security.mfa-description' }, {}),
    //   actions: [
    //     <a>
    //       <FormattedMessage id="app.settings.security.bind" defaultMessage="Bind" />
    //     </a>,
    //   ],
    // },
  ];

  render() {
    return (
      <Fragment>
        <List
          itemLayout="horizontal"
          dataSource={this.getData()}
          renderItem={item => (
            <List.Item actions={item.actions}>
              <List.Item.Meta title={item.title} description={item.description} />
            </List.Item>
          )}
        />
      </Fragment>
    );
  }
}

export default SecurityView;
